<template>
	<view class="bi-icon-button" :class="['is-' + dir, { 'is-disabled': disabled }, 'bi-icon-button--' + type, 'bi-icon-button--' + size]" @click="handleClick">
		<view class="bi-icon-button__icon" :style="{'background-image': `url(${icon})`}"></view>
		<view class="bi-icon-button__text" v-if="text">{{ text }}</view>
	</view>
</template>

<script>
export default {
	name: 'BiIconButton',
	props: {
		icon: {
			type: String
		},
		text: {
			type: String
		},
		size: {
			type: String,
			default: 'small',
			validator (value) {
				return ['small', 'mini'].includes(value)
			}
		},
		type: {
			type: String,
			default: 'default',
			validator (value) {
				return ['default', 'success', 'warning'].includes(value)
			}
		},
		disabled: {
			type: Boolean
		},
		dir: {
			type: String,
			default: 'vertical'
		}
	},
	methods: {
		handleClick () {
			if (this.disabled) {
				return
			}
			this.$emit('click')
		}
	}
}
</script>

<style lang="less">
.bi-icon-button{
	line-height: 24px;
	&.is-vertical {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	&.is-disabled{
		opacity: .5;
	}
}
.bi-icon-button--small{
	line-height: 24px;
	.bi-icon-button__icon{
		width: 22px;
		height: 23px;
	}
	&.is-vertical {
		.bi-icon-button__icon{
			margin-bottom: 6px;
		}
	}
}
.bi-icon-button--mini{
	font-size: 12px;
	.bi-icon-button__icon{
		width: 16px;
		height: 16px;
	}
}
.bi-icon-button__icon{
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
.bi-icon-button--warning {
	color: #F47554;
}
.bi-icon-button--success {
	color: #07C160;
}
.bi-icon-button__text{
	font-size: 13px;
}
</style>